let path=require("path");
let HtmlWebpackPlugin=require("html-webpack-plugin");
let {CleanWebpackPlugin}=require("clean-webpack-plugin");
let MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports={
    // 多入口配置
    entry:{
        "index":"./src/index/entry.js",
        "detail":"./src/detail/entry.js"
    },
    // 打包模式
    mode:"development",
    //创建一个map文件，说明源码位置，方便调试过程之中修改代码 
    devtool:"source-map",
    // 出口配置
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"javascript/[name]-[hash:5].js"
    },
    // 配置loader
    module:{
        rules:[
            // 一个对象就是一个加载规则
            {
                // 配置css后缀识别
                test:/\.css$/,
                use:[
                    // 调用顺序是从后往前调用
                    // 把可以被js兼容的css文件放在html结构的header之中
                    MiniCssExtractPlugin.loader,
                    // 识别css文件，并让css文件变成可以被js兼容的模式
                    "css-loader"
                ]
            },
            {
                // 配置scss后缀识别
                test:/\.scss$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },
        ]
    },
    // plugins是配置插件的地方，我们把插件引入之后放在这个数组之中使用
    plugins:[
        new MiniCssExtractPlugin({
            filename:"css/[name]-[hash:5].css"
        }),
        new CleanWebpackPlugin(),

        // new HtmlWebpackPlugin 这个插件会直接创建一个html文件，这个文件我们修改的方式可以依靠传入参数进行修改，但是太麻烦了
        // 我们应该创建一个html模板，我们在配置文件之中说明模板位置之后，插件会根据模板生成html结构，并把我们的依赖进行引入
        // 这个模板通常在src文件夹之中配置
        // 有多少要引入的html结构，就要调用几次new HtmlWebpackPlugin
        new HtmlWebpackPlugin({
            // 只要添加了template属性，这个title属性就失效了
            // title:"苏宁易购-官方网站",
            // 引入模板位置
            template:"./src/index/index.html",
            // 配置inject属性，决定依赖放在哪里
            inject:"body",
            // 表示需要引入的代码名称
            // chunks名称就是我们定义入口是对象的key值
            chunks:["index"],
            filename:"index.html"
        }),
        new HtmlWebpackPlugin({
            template:"./src/detail/detail.html",
            inject:"body",
            chunks:["detail"],
            filename:"detail.html"
        }),
    ],
    // 配置dev-server服务器
    devServer:{
        port:9000,
        hot:true,
        static:"public"
    }
}